<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 8</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>
<script>
    // 第二章  Vue 基础语法/2-7 数据，方法，计算属性和监听器(1)
    // const app = Vue.createApp({
    //     data() {
    //         return {
    //             message: 'Hello world',
    //             count: 2,
    //             price: 6
    //         };
    //     },
    //     computed: {
    //         total() {
    //             return this.count * this.price
    //         }
    //     },
    //     methods: {
    //         formatString(string) {
    //             return string.toUpperCase();
    //         }
    //     },
    //     template: `
    //     <div>
    //         {{message}}
    //         {{total}}
    //     </div>`
    // });
    // const vm = app.mount('#root')



    // 第二章  Vue 基础语法/2-7 数据，方法，计算属性和监听器(2)
    // data methods computed  watcher
    // computed 和 methods 都能实现的功能建议使用 computed 以为有缓存行
    // computed 和 watcher 都能实现的功能 建议使用 computed 因为更加简洁
    const app = Vue.createApp({
        data() {
            return {
                message: 'Hello world',
                count: 2,
                price: 6
            };
        },
        // 监听器
        watch: {
            // pric发生改变时执行函数
            price(current, prev) {
                this.newTotal = current * this.count;
            }
        },
        // 计算属性
        computed: {
            // 当计算属性依赖的内容发生改变时，才会重新执行
            total() {
                return Date.now() + this.count;
                // return this.count * this.price
            }
        },
        methods: {
            formatString(string) {
                return string.toUpperCase();
            },
            // 只要页面重新渲染，才会重新计算
            getTotal() {
                return Date.now();
                // return this.count * this.price
            }
        },
        template: `
        <div>
            {{message}}
            {{total}}
        </div>`
    });
    const vm = app.mount('#root')
</script>